<#include "../common/header.htm">
<div class="content-wrapper" id="oneKeySearchAdd" style="margin-top: 24px;">
    <el-form ref="template" :model="template">
        <el-button class="addZbtn" @click="addFiledInfo">新增字段类型</el-button>
        <el-button class="addZbtn" @click="window.location.href='${ctx}/onekey/list/'">返回模板列表</el-button>
        <div v-for=" (item,index) in template.dataTemplateFieldList">
            <!--<el-form-item label="对应列名">
                <el-input class="sapceCol" v-model="item.colname"></el-input>
            </el-form-item>-->
            <el-form-item label="字段中文名">
                <el-input class="sapceCol" v-model="item.filedname"></el-input>
            </el-form-item>
            <el-form-item label="顺序">
                    <el-input v-model="item.orderIndex"></el-input>
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="item.colsx" placeholder="请选择模板类型">
                    <el-option label="常规" value="1"></el-option>
                    <el-option label="姓名" value="2"></el-option>
                    <el-option label="证件号码" value="3"></el-option>
                    <el-option label="电话号码" value="4"></el-option>
                    <el-option label="车牌号码" value="5"></el-option>
                    <el-option label="银行卡号" value="6"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字段类型">
                <el-select v-model="item.sjlx" placeholder="请选择模板类型">
                    <el-option label="字符串类型" value="1"></el-option>
                    <el-option label="整数类型" value="2"></el-option>
                    <el-option label="小数类型" value="3"></el-option>
                    <el-option label="时间类型" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="对应excel第几列">
                <el-input v-model="item.col"></el-input>
            </el-form-item>
            <el-form-item label="显示列宽">
                <el-input v-model="item.colwidth"></el-input>
            </el-form-item>
            <el-button class="addZbtn"  @click="delFiledInfo(index)">删除字段类型</el-button>
        </div>
        <div id="creatContent">
            <el-form-item class="creatCon">
                <el-button class="creatBtn" type="primary" @click="onSubmit">提交</el-button>
                <el-button class="creatBtn" @click="returnTempleteList">返回列表</el-button>
            </el-form-item>
        </div>

    </el-form>
</div>
<!--<link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-ui.css">
<script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
<script src="${ctx}/bower_components/vue/js/element-ui.js"></script>
<script src="${ctx}/bower_components/vue/js/axios.js"></script>-->
<script type="text/javascript">
    let vid = '${vid}';
    window.onload=function () {
        if (vid!=0) {
            vm.findTemplateById(vid);
        }
    }
    var vm=new Vue({
        el: '#oneKeySearchAdd',
        data:{
            template:{
                mobanname:'',
                tablename:'',
                sourceType:'1',
                templateType:'0',
                beginLine:'',
                dataTemplateFieldList:[],
            }
        },
        created:function () {

        },
        methods:{
            returnTempleteList(){
                window.location.href="${ctx}/onekey/list";
            },
            findTemplateById(vid){
                axios.get('${ctx}/onekey/findTemplateDtoById/'+vid, {
                }).then(function (response) {
                    let t=response.data.data
                    for (let i = 0; i < t.dataTemplateFieldList.length; i++) {
                        t.dataTemplateFieldList[i].colsx=t.dataTemplateFieldList[i].colsx.toString();
                        t.dataTemplateFieldList[i].sjlx=t.dataTemplateFieldList[i].sjlx.toString();
                    }
                    vm.template=t;
                })
            },
            addFiledInfo(){
                let filed={colname:'',filedname:'',orderIndex:'',colsx:'',sjlx:'',col:'',colwidth:''}
                vm.template.dataTemplateFieldList.push(filed)
            },
            delFiledInfo(index){
                vm.template.dataTemplateFieldList.splice(index,1)
            },
            onSubmit(){
               console.log(vm.template)
                if(vm.check()) return;
               axios.post('${ctx}/onekey_filed/add',{
                   "vid":vm.template.vid,
                   "mobanname":vm.template.mobanname,
                   "tablename":vm.template.tablename,
                   "sourceType":vm.template.sourceType,
                   "templateType":vm.template.templateType,
                   "beginLine":vm.template.beginLine,
                   "dataTemplateFieldList":vm.template.dataTemplateFieldList,
               }).then(function (response) {
                   console.log(response.data)
                   if (response.data.code==20000){
                       vm.findTemplateById(vid);
                       vm.$message.success('编辑字段成功');
                       //vm.returnTempleteList()
                   }
                })
            },
            check(){
                let orderIndexArr=[] //用来存放排序的值，不让顺序设置的一样
                let filednameArr=[] //字段中文名
                let colArr=[] //excel第几列
                for (let i = 0; i < vm.template.dataTemplateFieldList.length; i++) {
                    let f = vm.template.dataTemplateFieldList[i];
                    orderIndexArr.push(f.orderIndex)
                    filednameArr.push(f.filedname)
                    colArr.push(f.col)
                    if (!f.filedname&&f.filedname!==0) {
                        vm.$message.error('字段中文名不能为null');
                        return true;
                    }
                    if (!f.orderIndex&&f.orderIndex!==0) {
                        vm.$message.error('顺序不能为null');
                        return true;
                    }
                    if (!f.colsx&&f.colsx!==0) {
                        vm.$message.error('分类不能为null');
                        return true;
                    }
                    if (!f.sjlx&&f.sjlx!==0) {
                        vm.$message.error('字段类型不能为null');
                        return true;
                    }
                    if (!f.col&&f.col!==0) {
                        vm.$message.error('excel第几列不能为null');
                        return true;
                    }
                }
                if (isExistsRepeat(orderIndexArr)) {
                    vm.$message.error('顺序不能重复');
                    return true;
                }
                if (isExistsRepeat(filednameArr)) {
                    vm.$message.error('字段中文名不能重复');
                    return true;
                }
                if (isExistsRepeat(colArr)) {
                    vm.$message.error('excel第几列不能重复');
                    return true;
                }
            },
            getlist(){
                axios.post('${ctx}/rule/search', {
                }).then(function (response) {
                    vm.dataList=response.data.data.content;
                })
            },
            del(id){
                this.$confirm('确定删除该模板么, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('${ctx}/rule/'+id, {
                    }).then(function (response) {
                        if (response.data.code=20000) {
                            vm.$message({
                                message: '删除模板成功',
                                type: 'success'
                            });
                            vm.getlist()
                        }else{
                            vm.$message.error('删除模板失败');
                        }
                    })
                });

            }
        }
    })
    function isExistsRepeat(ary){
        var nary = ary.sort();
        for(var i = 0; i < nary.length - 1; i++) {
            if(nary[i] == nary[i + 1]) {
                return true;
            }
        }
        return false;
    }
</script>
<style>
    div#creatContent {
        text-align: center;
    }
    .creatBtn {
        margin-left: 15px;
        margin-bottom: 10px;
        width: 120px;
    }
    .addZbtn {
        width: 100px;
        padding-left: 8px;
        padding: 10px;
        margin-left: 20px;
    }
    .el-input {
        width: 100px;
    }
    .sapceCol.el-input {
        width: 160px;
    }
    .el-form-item.sapceRow {
        margin-left: 70px;
    }
    .excelCol.el-input {
        /*width: 100px;*/
    }
    .el-form-item__label{
        line-height: 35px;
        padding-right: 0;
    }
    .el-form-item {
        display: inline-block;
        margin-right: 35px;
        margin-left: 15PX;
        margin-top: 15px;
        margin-left: 10px;
        margin-right: 0px;
        margin-top: 0px;
    }
    .el-form-item__content {
        display: inline-block;
        margin-left: 10px!important;
        /*width: 100px;*/
    }
    input.el-input__inner {
        height: 35px;
    }


    .el-row > .el-col{
        margin: 10px;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 150px;
        height: 100px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .el-button.is-circle{
        padding: 2px;
    }
    .overflow{overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}

</style>
<#include "../common/footer.htm">